﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import echarts from 'echarts'
import './Chart.css'
import { BAR } from './chartTypes'
import buildOption from './OptionBuilder'

export default class extends Component {
    constructor(props) {
        super(props);
        this.chartbox = React.createRef();
    }
    static propTypes = {
        chartName: PropTypes.string.isRequired,
        data: PropTypes.object
    }
    componentDidMount() {
        this.chart = echarts.init(this.chartbox.current)
    }
    componentDidUpdate() {
        var options = buildOption(this.props);
        options && this.chart.setOption(options)
    }
    render() {
        return <div className={`chart-box ${this.props.chartName === BAR ? 'bar-box' : 'doughnut-box'}`} ref={this.chartbox} />
    }
}
